<template>
  <div class="birdDetail">
    <van-nav-bar
      :title="bird.BirdChineseName"
      @click-left="routerBack()"
      :fixed="true"
      :safe-area-inset-top="true"
      :placeholder="true"
      left-arrow
    >
    </van-nav-bar>

    <van-swipe class="swipe-wrapper">
      <van-swipe-item v-for="(item, index) in bird.imgList" :key="index">
        <van-image
          @click="doPreview(index)"
          width="100%"
          height="100%"
          fit="contain"
          :src="item"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" /> </template
        ></van-image>
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>
    <van-divider dashed>鸟类命名</van-divider>
    <van-cell-group inset>
      <van-cell title="中文名" :value="bird.BirdChineseName" />
      <van-cell title="英文名" :value="bird.BirdEnglishName" />
      <van-cell title="保护状况" :value="bird.protectionStatus" />
      <van-cell
        v-if="bird.classification"
        title="科学分类"
        :value="`${bird.classification.mu} - ${bird.classification.ke} `"
      />
    </van-cell-group>
    <van-divider v-if="bird.introduction" dashed>鸟类简介</van-divider>
    <van-cell :value="bird.introduction" />
    <van-divider v-if="bird.habitat" dashed>栖息环境</van-divider>
    <van-cell :value="bird.habitat" />
    <van-divider v-if="bird.character" dashed>性格习性</van-divider>
    <van-cell :value="bird.character" />
  </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onBeforeMount } from '@vue/runtime-core';
import { ImagePreview } from 'vant';
import { getBirdById } from '@/api/interface';
import { useRoute, useRouter } from 'vue-router';
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      bird: {},
    });
    onBeforeMount(async () => {
      await getBirdById({ id: route.params.id }).then((res) => {
        console.log(res);
        state.bird = res.data;
      });
    });
    const doPreview = (index) => {
      ImagePreview({
        images: state.bird.imgList,
        closeable: true,
        startPosition: index,
      });
    };
    const routerBack = () => {
      router.go(-1);
    };
    return { ...toRefs(state), doPreview, routerBack };
  },
};
</script>
<style lang="less" scoped>
.birdDetail {
  width: 95vw;
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 0 auto;
}
.swipe-wrapper {
  width: 100%;
  height: 40vh;
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
}
</style>
